<template>
  <PageContainer>
    <Header title="单位详情" :default-slot-content-height="216">
      <!-- 单位信息头部 -->
      <view class="hb-p-4">
        <view class="hb-flex">
          <view class="hb-shrink-0 hb-mr-3">
            <t-image
              width="96rpx"
              height="96rpx"
              border-radius="12rpx"
              :src="unitInfo.logo"
            ></t-image>
          </view>
          <view class="hb-flex-1">
            <view class="hb-text-xs hb-font-bold hb-mb-2">{{ unitInfo.name }}</view>
            <view class="hb-flex hb-flex-wrap hb-gap-1 hb-mb-2">
              <view
                class="hb-px-1.5 hb-py-0.5 hb-text-[20rpx] hb-rounded-[4rpx] hb-text-[#2878FF] hb-border hb-border-[#2878FF]"
              >
                存续
              </view>
              <RoleTag
                v-for="(tag, index) in unitInfo.tags"
                :key="index"
                :text="tag"
                type="member"
              />
            </view>
          </view>
        </view>
        <view class="hb-flex hb-items-center hb-text-xs hb-text-[#969799] hb-mt-3">
          <tm-icon name="ali-icon icon-address" :font-size="32" color="#969799"></tm-icon>
          <text class="hb-ml-1">{{ unitInfo.address }}</text>
        </view>
      </view>
    </Header>
    <view class="hb-p-4">
      <view class="hb-p-4 hb-bg-white hb-rounded-3xl">
        <!-- 关联智能助手 -->
        <view class="hb-mb-7">
          <view class="hb-flex hb-justify-between hb-items-center hb-mb-3">
            <view class="hb-text-[32rpx] hb-font-bold">关联智能助手</view>
            <view
              class="hb-flex hb-items-center hb-gap-1 hb-bg-[#2878FF] hb-px-2 hb-py-1 hb-rounded-[24rpx]"
              @click="handleClick"
            >
              <tm-icon name="ali-icon icon-main_comment" :font-size="24" color="#FFF"></tm-icon>
              <text class="hb-text-[24rpx] hb-text-white">对话</text>
            </view>
          </view>
          <view class="hb-flex hb-p-3 hb-border hb-border-[#EBEDF0] hb-rounded-[16rpx]">
            <view class="hb-mr-2">
              <t-image
                width="80rpx"
                height="80rpx"
                border-radius="50%"
                :src="unitInfo.assistant.avatar"
              ></t-image>
            </view>
            <view class="hb-flex-1">
              <view class="hb-text-xs hb-leading-5 hb-font-bold hb-mb-1">
                {{ unitInfo.assistant.name }}
              </view>
              <view class="hb-flex hb-items-center hb-gap-2">
                <RoleTag text="产品总监" type="superAdmin" />
                <RoleTag text="个人认证" icon="icon-yonghu" type="member" />
              </view>
            </view>
          </view>
        </view>
        <!-- 单位介绍 -->
        <view class="hb-mb-7">
          <view class="hb-flex hb-justify-between hb-items-center hb-mb-3">
            <view class="hb-text-[32rpx] hb-font-bold">单位介绍</view>
          </view>
          <view class="hb-leading-relaxed hb-text-gray-800">
            <tm-text
              :label="unitInfo.description"
              :font-size="28"
              color="#646566"
              :line-height="40"
            ></tm-text>
          </view>
        </view>

        <!-- 主营业务 -->
        <view class="hb-mb-7">
          <view class="hb-flex hb-justify-between hb-items-center hb-mb-3">
            <view class="hb-text-[32rpx] hb-font-bold">主营业务</view>
          </view>
          <view class="hb-flex hb-flex-wrap hb-gap-3">
            <view
              v-for="(business, index) in unitInfo.businessServices"
              :key="index"
              class="hb-px-3 hb-py-1 hb-text-[28rpx] hb-bg-[#D0F7FF] hb-leading-5 hb-rounded-[8rpx] hb-text-[#2878FF]"
            >
              {{ business }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* unitDetail 单位详情 */
  import { ref } from 'vue';
  import RoleTag from '@/components/RoleTag/index.vue';
  import TImage from '@/components/TImage/index.vue';

  // 模拟单位详情数据
  const unitInfo = ref({
    logo: '/static/images/logo.png',
    name: '深圳会邦科技有限公司',
    tags: ['科技', '人工智能', '智能助手', '加入会邦中心'],
    address: '广东省深圳市南山区科技园区',
    assistant: {
      name: '张三的小助手',
      avatar: '/static/images/avatar.png',
      userCount: '4人以上',
    },
    description:
      '这里是单位介绍内容，展示完全为止。这里是单位介绍内容，展示完全为止。这里是单位介绍内容，展示完全为止。这里是单位介绍内容，展示完全为止。这里是单位介绍内容，展示完全为止。这里是单位介绍内容，展示完全为止。这里是单位介绍内容，展示完全为止。这里是单位介绍内容，展示完全为止。',
    businessServices: ['商协会SaaS系统', '集体房屋服务', '地方好礼推广运营'],
  });
  const handleClick = () => {
    redirectTo({
      name: 'aiChatPage',
    });
  };
</script>

<style lang="scss" scoped>
  /* 使用WindCSS，样式已通过类名应用 */
</style>
